<template>
  <div>
    <div>
      <q-select v-model="data[0].value"  :label="data[0].label" :options="data[0].options ? data[0].options : ''" outlined dense @blur="getEnterprise(data[0].value)"></q-select>
      <q-select v-model="data[1].value"  :label="data[1].label" :options="data[1].options ? data[1].options : ''" outlined dense @blur="getFactory(data[1].value)"></q-select>
    </div>
  </div>
</template>

<script>
/* 企业和厂区选择组件 */
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'EnterpriseFactory',
  setup () {
    const data = ref([
      {
        label: '所属企业',
        tag: 'select',
        options: ['浙江锦达新材料股份有限公司',
          '浙江海利得新材料股份有限公司',
          '浙江明士达新材料股份有限公司',
          '浙江港龙新材料股份有限公司',
          '海宁市泉洪印花有限公司',
          '海宁市饰雅纺织有限公司',
          '海宁市美顺纺织有限公司',
          '海宁森杰纺织品印花有限公司',
          '海宁市马桥家和印花厂',
          '浙江万方纺织科技有限公司',
          '海宁市鼎胜纺织有限公司',
          '浙江名和新材料股份有限公司',
          '海宁市宏亮照明有限公司'],
        value: ''
      },
      { label: '所属厂区', tag: 'select', options: [], value: '' }
    ])
    const getEnterprise = (v) => { // 请求获取厂区
      if (v) {
        // data.value[2].options.push(v)
        console.log(data.value[1].options.push(v))
        console.log(v)
      }
    }
    const getFactory = (v) => {
      if (v) {
        console.log(v)
      }
    }
    return {
      getEnterprise,
      getFactory,
      data
    }
  }
})
</script>

<style scoped>

</style>
